/* general */
* {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
   }
   
   html {
     scroll-behavior: smooth;
   
   }
   
   :root {
     --white--color: #f5f5f8;
     --Silver-color: #e6e6e6;
      --gray--color: #eaebeb;
     --bg-color: #f5f5f5;
   }
   
   body {
     font-family: 'Work Sans', sans-serif;
     background-color: var(--bg-color) !important;
     line-height: 1.6;
   }
   
   picture,
   img {
     max-width: 100%;
   }
   
   a {
     text-decoration: none !important;
     color: #424245 !important;
   }
   
   /* navbar */
   .navbar {
     background-color: var(--gray--color);
   }
   
   .navbar .navbar-nav .nav-link {
     color: #424245 !important;
   }
   
   
   .navbar .navbar-nav .nav-link:hover {
     /* color:var(--Silver-color) !important; */
     opacity: 1;
     visibility: visible;
   }
   
   
   
   .navbar .navbar-toggler {
     color: var(--white--color) !important;
     font-size: 25px;
     border-color: white;
   }
   
   
   .navbar .navbar-toggler:focus {
     box-shadow: none;
   }
   
   .navbar-brand img {
     display: block;
     width: 70px;
     border-radius: 3px;
   
   }
   
   @media screen and (max-width: 990px) {
   
     .nav-item {
       padding: 10px 0px;
       border-bottom: 1px solid #202023;
       text-align: center;
       color: #fff;
       font-size: 20px;
       text-transform: uppercase;
       font-weight: 800;
       line-height: 1.5;
     }
   }
   
   
   /* main section */
   
   .title{
     font-family: 'Open Sans', sans-serif;
     text-align: center;
     margin-top: 1em;
     font-size: 2.8em;
     font-weight: 700;
     color: rgb(48,67,89);
     color: linear-gradient(0deg, rgba(48,67,89,1) 48%, rgba(169,232,205,1) 48%);
     margin-bottom: 0;
   }
   
   .sub-title{
     font-family: 'Open Sans', sans-serif;
     text-align: center;
     font-size: 2em;
     line-height: 1.5;
     font-weight: 500;
     color:rgb(80,202,179);
     color: linear-gradient(90deg, rgba(80,202,179,1) 28%, rgba(169,232,205,1) 49%);
     margin-bottom: 1em;
     margin-top: 1em;
   }
   
   .img{
     width: 100%;
   }
   
   .img-container,
   img{
     margin: 0;
     padding: 0;
   }
   
   
   .summary{
     width: 80%;
     margin: 0 auto;
     padding-top: 0;
     padding-bottom: 0;
   }
   
   .summary p{
     font-family: 'Open Sans', sans-serif;
     font-size: .9em;
     line-height: 2.1;
     margin-bottom: 0;
     letter-spacing: 1px;
   }
   
   @media (min-width: 800px) {
     .img-container{
       display: flex;
       align-items: center;
     }
   
     .img{
       width: 60%;
       max-width: 400px;
       height: 400px;
     }
   
     .summary{
       width: 100%;
       max-width: 400px;
     }
   }